iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
0
Modern Web

30天切版臨摹!從模仿各大網站掌握商用級的前端HTML/CSS觀念系列 第 2

從 W3Schools 學習基本頁面佈局 - 前處理【30天切版臨摹 D2】

  • 分享至 

  • xImage
  •  

從 W3Schools 學習基本頁面佈局 - 前處理

我剛開始學 HTML, CSS 是在 W3Schools 這個網站上學的,內容非常詳盡,絕對推薦給每一個想要入門網頁開發的人。即使是現在,我也常常回去查我忘記的語法,很實用!

所以第一篇正文,我們就來研究 W3Schools 的程式碼,看看他們是如何佈局出整個網頁的吧!

W3Schools網址:https://www.w3schools.com/


讓我們先簡化程式碼

正式上線的網頁,通常都會經過許多處理:Transpile(轉譯)、Minify(壓縮減少換行和空白)、Uglify(修改變數命名讓別人較難看出JS邏輯)、打包、塞入追蹤程式碼等,這些會讓我們難以找到真正影響樣式的code,所以我預先把w3schools的程式碼抓下來,刪除了許多不必要的部份,後續我們會基於簡化後的code來討論(關於如何簡化程式碼,後續會有獨立文章說明):

CodeSandbox
Live Demo

所有程式碼版權由 W3Schools.com 所有,本文章僅供教學用途。

簡化後的畫面(桌機版本),只留下必要元素:

簡化後的畫面(手機版本),左側sidebar被隱藏了,保留了原站的RWD功能:


明天,讓我們來深入他們的程式碼實作細節,看他們如何佈局網站的排版,以及實現RWD功能!


上一篇
一起挖掘各大網站原始碼,掌握前端切版概念【30天切版臨摹 D1】
下一篇
從 W3Schools 學習基本頁面佈局 - 版面【30天切版臨摹 D3】
系列文
30天切版臨摹!從模仿各大網站掌握商用級的前端HTML/CSS觀念3
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言